<template>
  <div>
    <NormalForm pageTitle="执行详情" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt" @handleQuery="handleQuery" @handleReset="handleReset">
      <template slot="more-btn">
        <el-button type="info" plain @click="goBack">返回</el-button>
      </template>
    </NormalForm>
    <div class="g-card" style="padding: 20px; margin-top: 16px">
      <el-table v-loading="loading" :data="tableList" style="width: 100%" height="380">
        <el-table-column label="姓名" align="center" prop="name">
          <template slot-scope="{ row }">
            <span style="color: #082aff">{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column v-for="item in cloumns" :key="item.key" :label="item.title" align="center" :prop="item.key" show-overflow-tooltip></el-table-column>
        <el-table-column label="跟进阶段" align="center" prop="followStatus">
          <template slot-scope="{ row }">
            <span>{{ followStatusOpt[row.followStatus] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发送状态" align="center" prop="status" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ sendTypeOpt[row.status] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行时间" align="center" prop="excuteTime"></el-table-column>
        <el-table-column label="执行员工" align="center" prop="cusToUser"></el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
  </div>
</template>


<script>
import { queryExcuteDetail, querySopUserList } from '@/api/communityOperating/personalSop'

export default {
  name: 'ImplementDetail',
  data() {
    return {
      queryForm: {
        userName: '',
        userIds: [],
        dateRange: [],
        sendStatus: '',
        trackState: '',
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '客户姓名',
          value: '',
          prop: 'userName',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '跟进阶段',
          value: '',
          prop: 'trackState',
          type: 'SELECT',
          emunName: 'followStatusList'
        },
        {
          label: '发送状态',
          value: '',
          prop: 'sendStatus',
          type: 'SELECT',
          emunName: 'sendTypeList'
        },
        {
          label: '执行员工',
          value: [],
          prop: 'userIds',
          type: 'SELECT',
          emunName: 'staffList',
          multiple: true
        },
        {
          label: '执行',
          value: [],
          prop: 'dateRange',
          type: 'DATE_RANGE',
          formate: 'yyyy-MM-dd',
          emunName: ''
        },
      ],
      enumOpt: {
        followStatusList: [],
        sendTypeList: [
          { dictLabel: '未发送', dictValue: '0' },
          { dictLabel: '发送成功', dictValue: '1' },
          { dictLabel: '发送失败', dictValue: '2' }
        ],
        staffList: []
      },
      followStatusOpt: {},
      sendTypeOpt: { 0: '未发送', 1: '发送成功', 2: '发送失败' },
      total: 0,
      loading: false,
      cloumns: [
        {
          key: 'phone',
          title: '手机'
        },
        {
          key: 'email',
          title: '邮箱'
        },
        {
          key: 'wx_code',
          title: '微信号'
        },
        {
          key: 'wxName',
          title: '微信名称'
        }
      ],
      tableList: [],
    }
  },
  created() {
    this.getEnumList()
    this.handleQuery()
  },
  methods: {
    getEnumList() {
      // 跟进阶段
      this.getDicts('follow_states').then((res) => {
        if (res.code === 200) {
          this.enumOpt.followStatusList = res.data
          res.data.forEach(item => {
            this.followStatusOpt[item.dictValue] = item.dictLabel
          })
        }
      })
      //获取执行员工
      querySopUserList({ taskId: this.$route.query.taskId, }).then(res => {
        res.data.forEach(item => {
          this.enumOpt.staffList.push({
            dictLabel: item.userName,
            dictValue: item.userId
          })
        })
      })
    },
    // 搜索
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.queryExcuteDetailFn();
    },
    // 重置
    handleReset() {
      this.queryForm = {
        userName: '',
        userIds: '',
        dateRange: [],
        sendStatus: '',
        trackState: '',
        pageNum: 1,
        pageSize: 20,
      },
      this.queryExcuteDetailFn()
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.queryExcuteDetailFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.queryExcuteDetailFn()
    },
    // 查询
    queryExcuteDetailFn() {
      let obj = {
        ruleId: this.$route.query.ruleId,
        taskId: this.$route.query.taskId,
        userName: this.queryForm.userName,
        userIds: this.queryForm.userIds + '',
        excuteStartTime: this.queryForm.dateRange?.[0],
        excuteEndTime: this.queryForm.dateRange?.[1],
        sendStatus: this.queryForm.sendStatus,
        trackState: this.queryForm.trackState,
        pageNum: 1,
        pageSize: 20,
      }
      this.loading = true
      this.tableList = []
      queryExcuteDetail(obj).then(res => {
        if (res.code === 200) {
          this.tableList = res.rows || []
          this.total = res.total || 0
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 返回
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>


<style lang="scss" scoped>
@import "@/styles/base.scss";
::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}
</style>
